<script setup>
</script>
<template>
    <div class="content">
        <div class="title child">
            <div class="title-left title-child">
                <div class="logo"></div>
                <div class="menu">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="title-right title-child"></div>

        </div>
        <div class="centre child"></div>
        <div class="bottom child"></div>
    </div>
</template>
<style scoped>
.content{
    width: 100vw;
    border: 1px solid red;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}
.child{
    border: 1px solid red;
    width: 100%;
    height: 100px;
    
}
.title{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15px;
}

.title-child{
    border: 1px solid red;
    height: 100%;
}
.title-left{
    width: 60%;
    display: flex;
    justify-content: space-between;
}
.title-left .logo{
    border: 1px solid red;
    min-width: 100px;
    width: 10%;
}
.title-left .menu{
    width: 80%;
    min-width: 1000px;
    display: flex;
    justify-content: space-between;
}
.title-left .menu div{
    width: 20%;
    min-width: 200px;

    border: 1px solid red;

}


.title-right{
    width: 20%;

}
.centre{
    flex-grow: 1;
}


</style>